<template>
  <div class="Login">
    <h1>快乐会所(会员版)</h1>
    <el-input v-model="name" placeholder="请输入账号:"></el-input>
    <el-input placeholder="请输入密码:" v-model="pwd" show-password></el-input>
    <div class="button">
      <el-button @click="Confirm"> 确 认 </el-button>
      <el-button @click="reset"> 重 置 </el-button>
    </div>
  </div>
</template>
<script>
import { Login } from "../api";
export default {
  data() {
    return {
      name: "admin",
      pwd: "123",
    };
  },
  methods: {
    async Confirm() {
      //拿取数据
      const { data } = await Login({ username: this.name, password: this.pwd });
      if (this.name == "" || this.pwd == "") {
        alert("账号/密码不能为空");
        return;
      }

      if (data.code == 0) {
        alert("账号/密码错误")
        return;
      }
      console.log(data);
      //保存token
      localStorage.setItem("token", JSON.stringify(data.token));

      sessionStorage.setItem("token", JSON.stringify(data.token));
      //所有数据
      localStorage.setItem("data", JSON.stringify(data));

      this.$router.push({ path: "/layout" });
    },
    reset() {
      (this.name = ""), (this.pwd = "");
    },
  },
};
</script>
<style lang="less" >
html,body{
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  background-image:url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00042-4105.jpg) ;
  background-repeat:no-repeat ;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.Login {
  opacity: 0.8;
  background-color: aliceblue;
  text-align: center;
  width: 400px;
  padding: 50px;
  border-radius: 50px;
  position: absolute;
  left: 20%;
  top: 50%;
  margin-top: -235px;
  margin-left: -250px;
  box-shadow: 5px 5px 10px 5px #ccc;
  .el-input {
    margin: 10px 0 0 0;
  }
  .button {
    margin: 30px 0 0 0;
  }
}
</style>